<template>
  <Teleport to="body">
    <Transition name="dialog-fade">
      <div v-if="modelValue" class="confirm-dialog__overlay" @click="onClickOutside">
        <div class="confirm-dialog" :class="typeClass" @click.stop>
          <div class="confirm-dialog__header">
            <div class="confirm-dialog__icon">
              <i :class="iconClass"></i>
            </div>
            <h3 class="confirm-dialog__title">{{ title }}</h3>
            <button class="confirm-dialog__close" @click="cancel">
              <i class="fas fa-times"></i>
            </button>
          </div>
          
          <div class="confirm-dialog__body">
            <p class="confirm-dialog__message">{{ message }}</p>
          </div>
          
          <div class="confirm-dialog__footer">
            <button class="admin-btn admin-btn--outline admin-btn--secondary" @click="cancel">
              {{ cancelText }}
            </button>
            <button 
              class="admin-btn" 
              :class="confirmBtnClass"
              @click="confirm"
              :disabled="loading"
            >
              <i v-if="loading" class="fas fa-spinner fa-spin"></i>
              <span>{{ confirmText }}</span>
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits, withDefaults } from 'vue';

export interface ConfirmDialogProps {
  /**
   * 当前对话框显示状态
   */
  modelValue: boolean;
  
  /**
   * 对话框标题
   */
  title: string;
  
  /**
   * 对话框消息内容
   */
  message: string;
  
  /**
   * 确认按钮文本
   */
  confirmText?: string;
  
  /**
   * 取消按钮文本
   */
  cancelText?: string;
  
  /**
   * 对话框类型，影响图标和确认按钮颜色
   * - danger: 危险操作 (红色)
   * - warning: 警告操作 (黄色)
   * - info: 普通信息 (蓝色)
   */
  type?: 'danger' | 'warning' | 'info';
  
  /**
   * 是否显示加载状态
   */
  loading?: boolean;
  
  /**
   * 点击外部是否关闭对话框
   */
  closeOnClickOutside?: boolean;
}

const props = withDefaults(defineProps<ConfirmDialogProps>(), {
  confirmText: '确认',
  cancelText: '取消',
  type: 'danger',
  loading: false,
  closeOnClickOutside: true
});

const emit = defineEmits<{
  /**
   * 更新对话框显示状态
   */
  (e: 'update:modelValue', value: boolean): void;
  
  /**
   * 确认按钮点击事件
   */
  (e: 'confirm'): void;
  
  /**
   * 取消按钮点击事件
   */
  (e: 'cancel'): void;
}>();

// 计算对话框样式类
const typeClass = computed(() => `confirm-dialog--${props.type}`);

// 计算图标类
const iconClass = computed(() => {
  switch (props.type) {
    case 'danger':
      return 'fas fa-exclamation-triangle';
    case 'warning':
      return 'fas fa-exclamation-circle';
    case 'info':
      return 'fas fa-info-circle';
    default:
      return 'fas fa-exclamation-triangle';
  }
});

// 计算确认按钮样式类
const confirmBtnClass = computed(() => {
  switch (props.type) {
    case 'danger':
      return 'admin-btn--danger';
    case 'warning':
      return 'admin-btn--warning';
    case 'info':
      return 'admin-btn--primary';
    default:
      return 'admin-btn--danger';
  }
});

// 确认操作
const confirm = () => {
  emit('confirm');
};

// 取消操作
const cancel = () => {
  emit('update:modelValue', false);
  emit('cancel');
};

// 点击外部区域
const onClickOutside = () => {
  if (props.closeOnClickOutside) {
    cancel();
  }
};
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.confirm-dialog__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($black, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: $z-index-modal;
}

.confirm-dialog {
  width: 100%;
  max-width: 450px;
  background-color: $white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-xl;
  overflow: hidden;
  margin: 0 $spacing-md;
  
  &__header {
    position: relative;
    padding: $spacing-lg;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid $gray-200;
  }
  
  &__icon {
    font-size: 2.5rem;
    margin-bottom: $spacing-md;
  }
  
  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin: 0;
    line-height: $line-height-tight;
  }
  
  &__close {
    position: absolute;
    top: $spacing-md;
    right: $spacing-md;
    background: none;
    border: none;
    color: $gray-500;
    font-size: $font-size-md;
    cursor: pointer;
    padding: $spacing-xs;
    
    &:hover {
      color: $gray-700;
    }
  }
  
  &__body {
    padding: $spacing-lg;
  }
  
  &__message {
    font-size: $font-size-sm;
    color: $text-secondary;
    margin: 0;
    line-height: $line-height-normal;
    text-align: center;
  }
  
  &__footer {
    padding: $spacing-md $spacing-lg $spacing-lg;
    display: flex;
    justify-content: center;
    gap: $spacing-md;
  }
  
  // 类型变体
  &--danger {
    .confirm-dialog__icon {
      color: $danger;
    }
  }
  
  &--warning {
    .confirm-dialog__icon {
      color: $warning;
    }
  }
  
  &--info {
    .confirm-dialog__icon {
      color: $info;
    }
  }
}

// 过渡动画
.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: opacity 0.3s ease;
  
  .confirm-dialog {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}

.dialog-fade-enter-from,
.dialog-fade-leave-to {
  opacity: 0;
  
  .confirm-dialog {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.dialog-fade-enter-to,
.dialog-fade-leave-from {
  opacity: 1;
  
  .confirm-dialog {
    transform: translateY(0);
    opacity: 1;
  }
}
</style> 